<template>

  <div class="login-box">
    <el-button type="primary" plain v-on:click="returnMain()">返回</el-button>
    <el-tabs type="card">
      <!-- 登录界面 -->
      <el-tab-pane label="登录" name="first">
        <el-form
          :model="user"
          label-width="80px"
          :rules="rules"
        >
          <h3 class="login-title">欢迎登录</h3>
          <el-form-item label="账号" prop="userId">
            <el-input
              type="text"
              placeholder="请输入账号"
              v-model="user.userId"
            />
          </el-form-item>
          <el-form-item label="密码" prop="userPwd">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="user.userPwd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="login()">登录</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>

      <!-- 注册界面 -->
      <el-tab-pane label="注册" name="second">
        <el-form
          :model="userRegister"
          label-width="80px"
          :rules="rules"
        >
          <h3 class="login-title">欢迎注册</h3>
          <el-form-item label="用户名" prop="userName">
            <el-input
              type="text"
              placeholder="请输入用户名"
              v-model="userRegister.userName"
            />
          </el-form-item>
          <el-form-item label="密码" prop="userPwd">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="userRegister.userPwd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="register()"
              >注册</el-button
            >
          </el-form-item>
        </el-form>

      </el-tab-pane>
        <!-- 管理员登录 -->
      <el-tab-pane label="管理员登录" name="three">
        <el-form
          :model="user"
          label-width="80px"
          :rules="rules"
        >
          <h3 class="login-title">管理员登录</h3> 
          <el-form-item label="账号" prop="userId">
            <el-input
              type="text"
              placeholder="请输入账号"
              v-model="user.userId"
            />
          </el-form-item>
          <el-form-item label="密码" prop="userPwd">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="user.userPwd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="adminLogin()">管理员登录</el-button>
          </el-form-item>
        </el-form>

      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    
    return {
      user: {
        
      },
      userRegister: {
  
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        userName: [
          { required: true, message: "用户名不可为空", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        userPwd: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },

      // 对话框显示和隐藏
      dialogVisible: false,
    };
  },

  methods: {
    onSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
          this.$router.push("/mainTable");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    },
    
    //用户登录请求
    login() {
      this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/userLogin", this.user).then((res) => {
        console.log(res.data);
        if (res.data.state) {
          localStorage.removeItem("user");
          localStorage.setItem("user",JSON.stringify(res.data.user));
          location.href = "#/mainTable";
        } else {
          alert(res.data.msg);
        }
      });
    },

    //用户注册请求
    register() {
      this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/userRegister", this.userRegister).then((res) => {
        console.log(res.data);
        if (res.data.state) {
          alert(res.data.msg);
          this.userRegister={}
        } else {
          alert(res.data.msg);
        }
      });
    },
//管理员登录
    adminLogin() {
      this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/userLogin", this.user).then((res) => {
        console.log(res.data);
        if (res.data.state) {
          localStorage.removeItem("user");
          localStorage.setItem("user",JSON.stringify(res.data.user));
          location.href = "#/mainTable";
        } else {
          alert(res.data.msg);
        }
      });
    },
    returnMain(){
            this.$router.push("/mainTable");
            
        },
  },
  
};
</script>

<style>
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>
